<script setup lang="ts">
// import { computed, onMounted, onUnmounted, ref } from 'vue'
import { computed, onMounted, ref } from 'vue'
import DoctorCard from './DoctorCard.vue'

// // 行内样式，用插件适配是不起作用，可以innerWidth 获取
// // 然后在onMounted生命周期函数中去触发调用，每当屏幕大小改变时，就是触发window.resize事件，然后调用函数，去重新给deviceWidth赋值
// // 在销毁组件时 移除事件
// onMounted(() => {
//   // 3.1一进入 组件 直接调用获取宽度的函数
//   setDevicewidth()
//   // 3.2当屏幕宽度改变时，触发resize事件
//   window.addEventListener('resize', setDevicewidth)
// })
// // 5、切换到其他组件中 需要销毁这个方法
// onUnmounted(() => {
//   window.removeEventListener('resize', setDevicewidth)
// })
// // 1、视口宽度
// const deviceWidth = ref(0)
// // 2、准备一个拿视口宽度的函数
// const setDevicewidth = () => {
//   // 把window的视口宽度赋值给deviceWidth
//   deviceWidth.value = window.innerWidth
// }
// // 4.需要的宽度
// const width = computed(() => (150 / 375) * deviceWidth.value)
// console.log(width)

// ========= ======= vueuse/core ======= ======= =======
// 用vueuse/core 库
// 引入
import { reqGetDoctorList } from '@/services/consult'
import type { Doctor } from '@/types/consult'
import { useWindowSize } from '@vueuse/core'
// 用它的width 再重命名
const { width: deviceWidth } = useWindowSize()
// 利用计算属性去计算
const width = computed(() => (150 / 375) * deviceWidth.value)

// 准备医生列表
const doctorList = ref<Doctor[]>([])
// 获取医生列表的请求函数
const getDoctorList = async () => {
  // 请求
  const res = await reqGetDoctorList({ current: 1, pageSize: 5 })
  // 数据拿回来了赋值给医生列表
  doctorList.value = res.data.rows
}

// 生命周期函数中调用请求函数
onMounted(() => {
  getDoctorList()
})
</script>

<template>
  <div class="follow-doctor">
    <div className="head">
      <p>推荐关注</p>
      <a href="javascript:;"> 查看更多<i class="van-icon van-icon-arrow" /></a>
    </div>
    <div class="body">
      <!-- swipe 组件 -->

      <van-swipe :width="width" :loop="false" :show-indicators="false">
        <van-swipe-item v-for="item in doctorList" :key="item.id">
          <!-- {{ item }} -->
          <!-- 传给子组件 -->
          <doctor-card :item="item" />
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.follow-doctor {
  background-color: var(--cp-bg);
  height: 250px;
  .head {
    display: flex;
    justify-content: space-between;
    height: 45px;
    align-items: center;
    padding: 0 15px;
    font-size: 13px;
    > a {
      color: var(--cp-tip);
    }
  }
  .body {
    width: 100%;
    overflow: hidden;
  }
}
</style>
